<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Konva</title>
		<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
		<!-- Konva官网 https://konvajs.github.io/ -->
    <script>
      // 创建舞台
		  var stage = new Konva.Stage({
				container: 'container',
				width: window.innerWidth,
				height: window.innerHeight
			})
			
		  // 创建层
			var layer = new Konva.Layer()
		  stage.add(layer)
			
		  // 中心点坐标
			var cenX = stage.width() / 2
			var cenY = stage.height() / 2
			
			var x = 1/8 * stage.width()
			var y = cenY
			var height = 1/12 * stage.height()
			var maxWidth = 3/4 * stage.width()
			// 绘制一个进度条
			var innerRect = new Konva.Rect({
				x: x,
				y: y,
				width: 100,
				height: height,
				opacity: .7,
				fill: 'lightblue',
				cornerRadius: height/2
			})
			// 把内部的矩形放到层里面
			layer.add(innerRect)
			
			var outerRect = new Konva.Rect({
				x: x,
				y: y,
				width: maxWidth,
				height: height,
				stroke: '#a3a3c2',
				strokeWidth: 2,
				cornerRadius: height/2
			})
			// 把外部的矩形放到层里面
			layer.add(outerRect)
			
			layer.draw()
			
			innerRect.to({
				width: maxWidth,
				duration: 1.5,
				// easing: Konva.Easings.Linear//线性
				easing: Konva.Easings.StrongEaseIn//强力
			})
    </script>
  </body>
</html>